<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>

    <style>
        .father{
            width: 620px;
            height: 420px;
            background: antiquewhite;
        }

        .one{
            width: 200px;
            height: 200px;
            background: tomato;
            float: left;
        }

        .two{
            width: 200px;
            height: 200px;
            background: cyan;
            float: left;
        }

        .three{
            width: 200px;
            height: 200px;
            background: purple;
            float: left;
        }

        .four{
            width: 610px;
            height: 210px;
            background: brown;
            /*此时如果不设置浮动的话，那么.four元素 就会被影响*/
            /*为了防止被影响，可以给该元素也添加浮动，也可以清除浮动(推荐)*/
            /*float: left;*/
            /*clear: left;*/
            /*clear: both;  清除两端浮动（推荐使用）*/
            clear: both;

        }



    </style>


</head>
<body>

<div class="father">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>


</body>
</html>